<template>
	<view class="fun-flex-col fun-justify-between page">
		<view class="fun-flex-col section">
			<view class="fun-flex-col group_4">
				<text class="fun-self-start font_2 text_3">Product</text>
				<text class="fun-self-start font_3 text_4">{{title}}</text>
				<view class="fun-self-stretch divider"></view>
				<view class="fun-self-start group_5 font_2 text_5">Purchase amount</view>
				
				<view class="fun-flex-row fun-justify-between fun-items-center group_6">
					<input placeholder="Enter your purchase amount" v-model="amount" type='digit'/>
					<text class="font text_8">USD</text>
				</view>
				
				<view class="fun-self-stretch divider_2"></view>
				<text class="fun-self-start text_9">The minimum purchase amount is {{minimumAmount}} USD.</text>
				<view class="fun-flex-row fun-items-center section_2">
					<image class="image_4" src="@/static/product/wallet.png" />
					<text class="font_4 text_10">Available Balance:</text>
					<text class="font_4 text_11">${{walletInfo.balance}}</text>
				</view>
			</view>
		</view>
		
		<view class="fun-flex-col group_8">
			<checkbox-group class="fun-mb-16" @change="changeBox">
				<label class="fun-flex-row fun-items-start">
					<checkbox value="remember" borderColor="#000000" activeBackgroundColor="#1A7B99" activeBorderColor="#fff" color="#fff" style="transform:scale(0.75)" />
					<view class="fun-flex-1 fun-self-center group_10 ml-5 font_4 text_12">
						Clicking confirm means that you are aware of the
						<text class="text_13">Product Contracts</text>
						and the notice of investor'srights and interests, etc.
					</view>
				</label>
			</checkbox-group>
			
			<view class="font_3 text-wrapper_2" @click="confirm">Confirm</view>
		</view>
	</view>
</template>

<script>
	import {wallet} from "@/api/account.js"
	import {productBuy} from "@/api/products.js"
	export default {
		data() {
			return {
				checkVal:"",
				pid:"",
				amount:"",
				minimumAmount:"",
				title:"",
				walletInfo:{}
			};
		},
		
		onLoad(option) {
			this.pid = this.UTILS.stringToNum(option?.pid)|| "";
			this.minimumAmount = this.UTILS.stringToNum(option?.minimumAmount)|| "";
			this.title = option?.title || "";
			this.getWalletInfo()
		},

		methods: {
			getWalletInfo(){
				wallet().then(res => {
					if(res.code == 0){
						this.walletInfo = res.data || {};
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			confirm(){
				if(!this.amount){
					this.UTILS.logStr("Enter your purchase amount");
					return
				}
				if(Number(this.amount) < Number(this.minimumAmount)){
					this.UTILS.logStr(`The minimum purchase amount is ${this.minimumAmount} USD`);
					return
				}
				if(!this.checkVal){
					this.UTILS.logStr("Please Agree Product Contracts");
					return
				}
				const params = {productId:this.pid,amount:this.UTILS.stringToNum(this.amount)}
				productBuy(params).then(res => {
					if(res.code == 0){
						this.UTILS.logStr(res.msg || 'success')
						setTimeout(() => {
							uni.navigateTo({
								url:'/pages/login/success?tips=You can check your products at "My Investment".&btnText=DONE&backUrl=/pages/home/index&pageType=tab'
							})
						},2000)
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			changeBox(ev){
				this.checkVal = ev.detail.value[0]
			}
		},
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.page {
		width: 100%;
		padding-bottom: 40rpx;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		background-color: #F6F6F6;
		.section {
			background-color: #ffffff;
			height: calc(100% - 144rpx - 88rpx - 32rpx);
			padding: 16px 16px 0 16px;
			.group_4 {
				.font_2 {
					font-size: 32rpx;
					font-family: SF Pro Display;
					font-weight: 600;
					color: #000000;
				}

				.text_4 {
					margin-top: 20rpx;
					margin-bottom: 12rpx;
					color: #000000;
				}

				.divider {
					background-color: #f6f6f6;
					height: 2rpx;
				}

				.group_5 {
					margin-top: 40rpx;
					margin-bottom: 20rpx;
					text-transform: capitalize;
					color: #000000;
					font-size: 32rpx;
					font-family: SF Pro Display;
					font-weight: 600;
					text-transform: lowercase;
				}

				.group_6 {
					input{
						flex: 1;
						padding: 16rpx 24rpx 16rpx 0;
						font-weight: 500;
						font-size: 36rpx;
					}
				}

				.divider_2 {
					background-color: #1a7b99;
					height: 4rpx;
				}

				.text_9 {
					margin-top: 12rpx;
					margin-bottom:20rpx;
					color: #777e90;
					font-size: 28rpx;
					font-family: SF Pro Display;
				}

				.section_2 {
					padding: 14rpx 20rpx;
					background-color: #f6f6f6;
					border-radius: 16rpx;

					.text_10 {
						margin-left: 8rpx;
						color: #1a7b99;
					}

					.text_11 {
						margin-left: 20rpx;
						color: #000000;
					}
				}
			}
		}

		.font {
			font-size: 32rpx;
			font-family: SF Pro Display;
			color: #000000;
		}

		.image_4 {
			width: 48rpx;
			height: 48rpx;
		}

		.group_8 {
			padding: 0 32rpx;
			.group_10 {
				word-break: break-all;
				color: #848484;
				font-size: 24rpx;
				.text_13{
					color: #000000;
					font-size: 28rpx;
					margin: 0 6rpx;
					font-weight: bold;
				}
			}
			

			.text-wrapper_2 {
				padding: 24rpx 0;
				background-color: #1a7b99;
				border-radius: 8rpx;
				color: #ffffff;
				text-align: center;
			}
		}

		.font_4 {
			font-size: 24rpx;
			font-family: SF Pro Display;
			color: #838383;
		}

		.font_3 {
			font-size: 28rpx;
			font-family: SF Pro Display;
			font-weight: bold;
		}
	}
</style>